{#物资申请页 流程发起页#}
{% extends "personal_center/zichan_base.html" %}


{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}
{% block style %}

    <style>
        .add_class {
            background: #1E90FF;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        table tr {
            height: 37px;
        }

        .button_for_control {
            width: 90px;
            height: 30px;
            border: 1px solid #99D3F5;
            background: #D0EEFF;
            border-radius: 4px;
            letter-spacing: 0;
            line-height: 30px;
            color: #089bab;
            margin: 5px 0;
        }
        #page_one button:hover {
            color: red;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div id="my_application_tab" class="tab_top top_tag" onclick="change_model('my_application')">申请详情</div>
        <div id="examine_tab" class="tab_top" onclick="change_model('examine')">审批详情</div>
        {% if is_audit == 'true' or is_recall == "true" or is_cancel == "ture" or is_stop == 'ture' %}
            <div id="" style="width: 100px;float: right;text-align: center;margin-right: 1%;height: 40px;">
                <button id="" onmousemove="page_zhanshi()" onmouseout="page_yincang()"
                        style="width: 100px;height: 30px;line-height: 27px;border: #1E90FF solid 1px;background: #1E90FF;color: white;margin-top: 5px;border-radius: 3px;">
                    操作
                </button>
            </div>
        {% endif %}

        <div id="page_one" onmousemove="page_zhanshi()" onmouseout="page_yincang()"
             style="z-index: 1000; position: absolute; width: 100px; height: auto;right: 1%; top: 80px;background: #FFFFFF; box-shadow: rgb(204 204 204) 2px 2px 10px;padding: 5px;display: none;">
            {% if is_audit == 'true' %}
                <button id="approve" onclick="online_tag()" class="button_for_control">
                    审批
                </button>
            {% endif %}
            {% if is_recall == 'true' %}
                <button id="is_recall" onclick="operate_button(this.id)" class="button_for_control">
                    撤回
                </button>
            {% endif %}
            {% if is_cancel == 'true' %}
                <button id="is_cancel" onclick="operate_button(this.id)" class="button_for_control">
                    作废
                </button>
            {% endif %}
            {% if is_stop == 'true' %}
                <button id="is_stop" onclick="operate_button(this.id)" class="button_for_control">
                    终止
                </button>
            {% endif %}
        </div>
    </div>



    <div id="new_models" style="width: 80%;height: 80%;position: absolute;display: none;">
        <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10100;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
            <div id="box"
                 style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                <h5 id="modal-title" class="modal-title"
                    style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">采购审批</h5>
                <span onclick="close_models()"
                      style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                        class="iconfont icon-quchu"></i></span>
            </div>
            <hr>
            <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;">
                <div>
                    <label style="vertical-align: top;">审批</label>
                    <input type="radio" name="approve" value="audit" checked>同意
                    <input style="margin-left: 3%;" type="radio" name="approve" value="draft">不同意
                </div>

                <div style="margin-top: 2%;width: 100%;">
                    <label style="vertical-align: top;">意见</label>
                    <textarea name="" id="opinion_detail" cols="30" rows="10" style="width: 90%;"></textarea>
                </div>
            </div>
            <hr>
            <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                <button onclick="summit_data()"
                        style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                    提交
                </button>
            </div>
        </div>
    </div>

    <div id="my_application" style="width: 100%; height: auto; min-height: 95%; padding: 0 15%; background: #FFFFFF">
        <div style="background: #FFFFFF;padding-top: 20px;">
            <table id="table_01" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0"
                   cellpadding="2" width="100%" border="1">
                <thead>
                <tr>
                    <td colspan="4" style="text-align: center;"><h3>京山市人民医院物资领用单</h3></td>
                </tr>
                <tr>
                    <td colspan="4" style="padding-left: 5px;background: #dfdfdf;">基本信息</td>
                </tr>
                <tr>
                    <td style="text-align: right;padding-right: 10px">申&nbsp;&nbsp;请&nbsp;&nbsp;人</td>
                    <td style="padding-left: 10px">{{ obj.apply_user.real_name }}</td>
                    <td colspan="1" style="text-align: right;padding-right: 10px">
                        申请部门
                    </td>
                    <td colspan="" style="padding-left: 10px">{{ obj.company.name }}</td>
                </tr>
                <tr>
                    <td style="text-align: right;padding-right: 10px">申请日期</td>
                    <td colspan="3" style="padding-left: 10px">{{ obj.date | date:"Y-m-d" }}</td>

                </tr>
                <tr>
                    <td colspan="4" style="padding-left: 5px;background: #dfdfdf;">采购信息</td>
                </tr>
                <tr>
                    <th style="text-align: center; width: 10%;">序号</th>
                    <th style="text-align: center; width: 30%">物料名称</th>
                    <th style="text-align: center; width: 30%">物料单位</th>
                    <th style="text-align: center; width: 30%">申请数量</th>
                </tr>
                </thead>
                <tbody id="table-tbody">
                {% for line_obj in line_objs %}
                    <tr>
                        <td style="text-align: center">{{ forloop.counter }}</td>
                        <td style="text-align: center">{{ line_obj.product.name }}</td>
                        <td id="product_unit_1" style="text-align: center">{{ line_obj.unit }}</td>
                        <td id="product_total_number_1" style="text-align: center">{{ line_obj.qty }}</td>
                    </tr>
                {% endfor %}

            </table>
            <table style="border-collapse: collapse;border-color: #DCDCDC;border-top: none" cellspacing="0"
                   cellpadding="2" width="100%" border="1">
                <tr>
                    <td style="text-align: center; font-size: 20px; font-weight: bold; font-family: 宋体">备&nbsp;注
                    </td>
                </tr>
                <tr>
                    <td style="padding-left: 10px">{{ obj.note }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="examine" style="width: 100%;height: 93%;overflow: auto;display: none;background-color: white;">
        <div class="right-box" style="width: 100%;height: 95%;margin-top: 0;">
            <div style="height: 93%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <table class="table table-hover table-bordered"
                       style="border-collapse: collapse;width: 100%;table-layout:fixed;">
                    <thead>
                    <tr>
                        <th style="text-align: center;">审批人</th>
                        <th style="text-align: center;">审批状态</th>
                        <th style="text-align: center;">审批时间</th>
                        <th style="text-align: center;">审批意见</th>
                        <th style="text-align: center;">签名</th>
                    </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="clsy_table">
                    {% for audit in audit_list %}
                        <tr>
                            <td style="text-align: center;">{{ audit.audit_user }}</td>
                            <td style="text-align: center;">{{ audit.state }}</td>
                            <td style="text-align: center;">{{ audit.audit_time }}</td>
                            <td style="padding-left: 10px;">{{ audit.audit_note }}</td>
                            <td style="text-align: center">{% if audit.signature_picture != '' %}
                                <img style="width: 150px;height: 60px;" src="{{ audit.signature_picture }}"
                                     alt="">{% endif %}</td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
                <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>
            <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personal_center/js/mock.js"></script>
    <script src="../../static/system_setup/js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/jquery.dropdown.min.css">
    <script src="../../static/personal_center/js/jquery.dropdown.min.js"></script>
    <script src="../../static/personal_center/js/numberInput.js" type="text/javascript" charset="utf-8"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("zichan").className = "add_class";
            document.getElementById("apply_list").className = "add-nav-active";
        };
        const id = {{ obj.id }}
        function change_model(ele_id) {
            if (ele_id === "my_application") {
                $("#my_application_tab").attr("class", "tab_top top_tag");
                $("#my_application").css("display", "inline-block");
                $("#examine_tab").attr("class", "tab_top");
                $("#examine").css('display', 'none');
            } else {
                $("#my_application_tab").attr("class", "tab_top");
                $("#my_application").css("display", "none");
                $("#examine_tab").attr("class", "tab_top top_tag");
                $("#examine").css('display', 'inline-block');
            }
        }

        function online_tag() {
            document.getElementById("new_models").style.display = "table";
        }

        function page_zhanshi() {
            document.getElementById('page_one').style.display = 'inline-block';
        }

        function page_yincang() {
            document.getElementById('page_one').style.display = 'none';
        }

        function close_models() {
            document.getElementById("new_models").style.display = "none";
        }

        function summit_data() {
            var present_id = window.location.href.split("id=")[1].replace("#", '');
            var approve = $("input[type=radio][name=approve]:checked").val();
            var audit_note = document.getElementById("opinion_detail").value;

            if (approve === "draft") {
                if (!audit_note) {
                    alert("不同意请填写理由！");
                    return false
                }
            }
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personal-center/product_adopt_detail_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id=" + id + "&state=" + String(approve) + "&audit_note=" + String(audit_note)+"&caozuo=audit");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("审批成功");
                            window.location.href = "/personal-center/product_apply_list_view";
                        } else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
            };
        }

        //  物资申请详情页撤回操作
        function operate_button(ele_id) {
            console.log(ele_id)
            if (ele_id === 'is_stop') {
                var state = 'stop';     // 终止
                var word = '终止'
            } else if (ele_id === 'is_cancel') {
                state = 'cancel';       // 作废
                word = '作废'
            } else{
                state = 'recall'
                word = '撤回'
            }
            var r = confirm('是否'+word+'流程？')
            if (r == true) {
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/personal-center/product_adopt_cancel_view", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("state=" + state + "&id=" + id)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate);
                            alert(JsonDate['message'])
                            window.location.href = "/personal-center/process_management.html?type=我的待办&folw_type=&folw=&page=1&page_size=20&wd="
                        }
                    }
                };
            }
        }
    </script>
{% endblock %}
